<template>
  <view class="battle-demo-container">
    <!-- 页面标题 -->
    <view class="page-header">
      <text class="page-title">Battle模块演示</text>
      <text class="page-subtitle">对战系统功能演示</text>
    </view>
    
    <!-- 功能区域 -->
    <view class="function-section">
      <!-- 竞技场管理 -->
      <view class="section-card">
        <text class="section-title">🏆 竞技场管理</text>
        <view class="button-group">
          <button class="demo-btn" @click="createArena">创建竞技场</button>
          <button class="demo-btn" @click="findArenas">查询竞技场</button>
          <button class="demo-btn" @click="joinArena">加入竞技场</button>
          <button class="demo-btn" @click="getRankingList">获取排行榜</button>
        </view>
      </view>
      
      <!-- 房间管理 -->
      <view class="section-card">
        <text class="section-title">🏠 房间管理</text>
        <view class="button-group">
          <button class="demo-btn" @click="createRoom">创建房间</button>
          <button class="demo-btn" @click="joinRoom">加入房间</button>
          <button class="demo-btn" @click="updateRoomStatus">更新房间状态</button>
          <button class="demo-btn" @click="generateScramble">生成打乱公式</button>
        </view>
      </view>
      
      <!-- 比赛管理 -->
      <view class="section-card">
        <text class="section-title">⚡ 比赛管理</text>
        <view class="button-group">
          <button class="demo-btn" @click="initMatch">初始化比赛</button>
          <button class="demo-btn" @click="createSchedule">创建赛程</button>
          <button class="demo-btn" @click="updateRoomResult">更新比赛结果</button>
          <button class="demo-btn" @click="calcRoomResults">计算房间结果</button>
        </view>
      </view>
      
      <!-- 新增比赛管理 -->
      <view class="section-card">
        <text class="section-title">🏆 新增比赛管理</text>
        <view class="button-group">
          <button class="demo-btn" @click="createMatch">创建比赛</button>
          <button class="demo-btn" @click="editMatch">编辑比赛</button>
          <button class="demo-btn" @click="removeMatch">删除比赛</button>
          <button class="demo-btn" @click="pageMatch">分页查询比赛</button>
        </view>
      </view>
      
      <!-- AI评审管理 -->
      <view class="section-card">
        <text class="section-title">🤖 AI评审管理</text>
        <view class="button-group">
          <button class="demo-btn" @click="getAiReviews">获取AI评审</button>
          <button class="demo-btn" @click="findReview">查询评审详情</button>
        </view>
      </view>
      
      <!-- 新增房间管理 -->
      <view class="section-card">
        <text class="section-title">🏠 新增房间管理</text>
        <view class="button-group">
          <button class="demo-btn" @click="createMatchRoom">创建房间</button>
          <button class="demo-btn" @click="editMatchRoom">编辑房间</button>
          <button class="demo-btn" @click="removeMatchRoom">删除房间</button>
          <button class="demo-btn" @click="pageMatchRoom">分页查询房间</button>
        </view>
      </view>
      
      <!-- 位置服务 -->
      <view class="section-card">
        <text class="section-title">📍 位置服务</text>
        <view class="button-group">
          <button class="demo-btn" @click="getLocation">获取位置</button>
          <button class="demo-btn" @click="updateLocation">更新位置</button>
          <button class="demo-btn" @click="getLocationInfo">位置信息</button>
        </view>
      </view>
    </view>
    
    <!-- 结果显示区域 -->
    <view class="result-section" v-if="result">
      <text class="result-title">API返回结果:</text>
      <view class="result-content">
        <text class="result-text">{{ JSON.stringify(result, null, 2) }}</text>
      </view>
    </view>
    
    <!-- 加载状态 -->
    <view class="loading-overlay" v-if="loading">
      <view class="loading-content">
        <view class="loading-spinner"></view>
        <text class="loading-text">请求中...</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { BattleAPI, RankingAPI, MatchAPI, AiReviewAPI, MatchRoomAPI } from '@/api/battle.js'

// 响应式数据
const loading = ref(false)
const result = ref(null)

const queryParams = ref({
  name: '',
  status: '',
  pageNum: 0,
  pageSize: 10
});

const roomQueryParams = ref({
  name: '',
  status: '',
  pageNum: 0,
  pageSize: 10
});

// 赛事分页查询
const matchPageData = ref({
  pageNum: 0,
  pageSize: 5,
  name: '测试赛',
  status: '1'
});

// AI陪练分页查询
const aiReviewPageData = ref({
  pageNum: 0,
  pageSize: 5
});

// 显示结果
const showResult = (data) => {
  result.value = data
  setTimeout(() => {
    result.value = null
  }, 5000)
}

// 错误处理
const handleError = (error) => {
  console.error('API调用失败:', error)
  uni.showToast({
    title: error.message || '操作失败',
    icon: 'none'
  })
}

// 竞技场管理
const createArena = async () => {
  loading.value = true
  try {
    const data = await RankingAPI.createArena({
      arenaName: '魔方竞技场_' + Date.now(),
      regionType: '全国',
      arenaType: '公开'
    })
    showResult(data)
    uni.showToast({
      title: '竞技场创建成功',
      icon: 'success'
    })
  } catch (error) {
    handleError(error)
  } finally {
    loading.value = false
  }
}

const findArenas = async () => {
  loading.value = true
  try {
    const data = await RankingAPI.findManyArena({
      arenaType: '公开',
      pageNum: 1,
      pageSize: 5
    })
    showResult(data)
  } catch (error) {
    handleError(error)
  } finally {
    loading.value = false
  }
}

const joinArena = async () => {
  loading.value = true
  try {
    const data = await RankingAPI.joinArena({
      arenaId: 'arena123'
    })
    showResult(data)
    uni.showToast({
      title: '加入竞技场成功',
      icon: 'success'
    })
  } catch (error) {
    handleError(error)
  } finally {
    loading.value = false
  }
}

const getRankingList = async () => {
  loading.value = true
  try {
    const data = await RankingAPI.rankingList({
      session: 1,
      matchScheduleId: 'schedule123',
      pageNum: 1,
      pageSize: 10
    })
    showResult(data)
  } catch (error) {
    handleError(error)
  } finally {
    loading.value = false
  }
}

// 房间管理
const createRoom = async () => {
  loading.value = true
  try {
    const data = await BattleAPI.createRoomByManually({
      matchScheduleId: 'schedule123',
      roomNum: 1,
      roomType: 1,
      roomTypeN: 2,
      roomTypeM: 2,
      roomStartType: 1,
      roomJoinModel: 1,
      roomLimitModel: 1,
      matchWinModel: 1
    })
    showResult(data)
    uni.showToast({
      title: '房间创建成功',
      icon: 'success'
    })
  } catch (error) {
    handleError(error)
  } finally {
    loading.value = false
  }
}

const joinRoom = async () => {
  loading.value = true
  try {
    const data = await BattleAPI.joinRoom({
      matchRoomId: 'room123',
      matchScheduleId: 'schedule123',
      name: '测试房间',
      matchTime: Date.now(),
      owner: 'user123',
      event: 1,
      status: 1,
      winModel: 1,
      startType: 1
    })
    showResult(data)
    uni.showToast({
      title: '加入房间成功',
      icon: 'success'
    })
  } catch (error) {
    handleError(error)
  } finally {
    loading.value = false
  }
}

const updateRoomStatus = async () => {
  loading.value = true
  try {
    const data = await BattleAPI.updateRoomStatus({
      matchRoomId: 'room123',
      event: 1
    })
    showResult(data)
    uni.showToast({
      title: '房间状态更新成功',
      icon: 'success'
    })
  } catch (error) {
    handleError(error)
  } finally {
    loading.value = false
  }
}

const generateScramble = async () => {
  loading.value = true
  try {
    const data = await BattleAPI.cubeGenerateScramble({})
    showResult(data)
    uni.showToast({
      title: '打乱公式生成成功',
      icon: 'success'
    })
  } catch (error) {
    handleError(error)
  } finally {
    loading.value = false
  }
}

// 比赛管理
const initMatch = async () => {
  loading.value = true
  try {
    const data = await BattleAPI.initMatch({
      matchId: 'match_' + Date.now(),
      name: '魔方速拧比赛',
      startTime: Date.now(),
      endTime: Date.now() + 86400000,
      desc: '这是一场魔方速拧比赛',
      createUserID: 'user123',
      sponsor: '魔方协会',
      status: 1,
      matchModel: 1,
      matchModelId: 'model123'
    })
    showResult(data)
    uni.showToast({
      title: '比赛初始化成功',
      icon: 'success'
    })
  } catch (error) {
    handleError(error)
  } finally {
    loading.value = false
  }
}

const createSchedule = async () => {
  loading.value = true
  try {
    const data = await BattleAPI.createSchedule({
      matchId: 'match123'
    })
    showResult(data)
    uni.showToast({
      title: '赛程创建成功',
      icon: 'success'
    })
  } catch (error) {
    handleError(error)
  } finally {
    loading.value = false
  }
}

const updateRoomResult = async () => {
  loading.value = true
  try {
    const data = await BattleAPI.updateRoomResult({
      matchRoomId: 'room123',
      matchScheduleId: 'schedule123',
      matchRoomSeatId: 'seat123',
      result: 85,
      time: 120,
      status: 1
    })
    showResult(data)
    uni.showToast({
      title: '比赛结果更新成功',
      icon: 'success'
    })
  } catch (error) {
    handleError(error)
  } finally {
    loading.value = false
  }
}

const calcRoomResults = async () => {
  loading.value = true
  try {
    const data = await BattleAPI.calcRoomResults({
      matchRoomId: 'room123'
    })
    showResult(data)
    uni.showToast({
      title: '房间结果计算成功',
      icon: 'success'
    })
  } catch (error) {
    handleError(error)
  } finally {
    loading.value = false
  }
}

// 位置服务
const getLocation = async () => {
  loading.value = true
  try {
    const data = await RankingAPI.locationGet({})
    showResult(data)
  } catch (error) {
    handleError(error)
  } finally {
    loading.value = false
  }
}

const updateLocation = async () => {
  loading.value = true
  try {
    const data = await RankingAPI.locationUpdate({
      longitude: 116.397128,
      latitude: 39.916527,
      address: '北京市朝阳区'
    })
    showResult(data)
    uni.showToast({
      title: '位置更新成功',
      icon: 'success'
    })
  } catch (error) {
    handleError(error)
  } finally {
    loading.value = false
  }
}

const getLocationInfo = async () => {
  loading.value = true
  try {
    const data = await RankingAPI.locationReGeo({
      longitude: 116.397128,
      latitude: 39.916527
    })
    showResult(data)
  } catch (error) {
    handleError(error)
  } finally {
    loading.value = false
  }
}

// 新增比赛管理
const createMatch = async () => {
  loading.value = true
  try {
    const data = await MatchAPI.create({
      matchId: 'match_' + Date.now(),
      name: '魔方速拧比赛',
      startTime: Date.now(),
      endTime: Date.now() + 86400000,
      desc: '这是一场魔方速拧比赛',
      createUserID: 'user123',
      sponsor: '魔方协会',
      status: 1,
      matchModel: 1,
      matchModelId: 'model123'
    })
    showResult(data)
    uni.showToast({
      title: '比赛创建成功',
      icon: 'success'
    })
  } catch (error) {
    handleError(error)
  } finally {
    loading.value = false
  }
}

const editMatch = async () => {
  loading.value = true
  try {
    const data = await MatchAPI.edit({
      matchId: 'match123',
      name: '修改后的比赛名称',
      startTime: Date.now(),
      endTime: Date.now() + 86400000,
      desc: '修改后的比赛描述',
      createUserID: 'user123',
      sponsor: '魔方协会',
      status: 1,
      matchModel: 1,
      matchModelId: 'model123'
    })
    showResult(data)
    uni.showToast({
      title: '比赛编辑成功',
      icon: 'success'
    })
  } catch (error) {
    handleError(error)
  } finally {
    loading.value = false
  }
}

const removeMatch = async () => {
  loading.value = true
  try {
    const data = await MatchAPI.remove({
      matchId: 'match123'
    })
    showResult(data)
    uni.showToast({
      title: '比赛删除成功',
      icon: 'success'
    })
  } catch (error) {
    handleError(error)
  } finally {
    loading.value = false
  }
}

const pageMatch = async () => {
  loading.value = true
  try {
    const data = await MatchAPI.page({
      pageNum: 1,
      pageSize: 10
    })
    showResult(data)
  } catch (error) {
    handleError(error)
  } finally {
    loading.value = false
  }
}

// AI评审管理
const getAiReviews = async () => {
  loading.value = true
  try {
    const data = await AiReviewAPI.getReviews({
      durationFrom: 60,
      durationTo: 120
    })
    showResult(data)
    uni.showToast({
      title: 'AI评审获取成功',
      icon: 'success'
    })
  } catch (error) {
    handleError(error)
  } finally {
    loading.value = false
  }
}

const findReview = async () => {
  loading.value = true
  try {
    const data = await AiReviewAPI.findReview({
      reviewId: 'review123'
    })
    showResult(data)
    uni.showToast({
      title: '评审详情查询成功',
      icon: 'success'
    })
  } catch (error) {
    handleError(error)
  } finally {
    loading.value = false
  }
}

// 新增房间管理
const createMatchRoom = async () => {
  loading.value = true
  try {
    const data = await MatchRoomAPI.create({
      matchRoomId: 'room_' + Date.now(),
      matchScheduleId: 'schedule123',
      name: '对战房间',
      matchTime: Date.now(),
      owner: 'user123',
      event: 1,
      status: 1,
      winModel: 1,
      startType: 1
    })
    showResult(data)
    uni.showToast({
      title: '房间创建成功',
      icon: 'success'
    })
  } catch (error) {
    handleError(error)
  } finally {
    loading.value = false
  }
}

const editMatchRoom = async () => {
  loading.value = true
  try {
    const data = await MatchRoomAPI.edit({
      matchRoomId: 'room123',
      matchScheduleId: 'schedule123',
      name: '修改后的房间名称',
      matchTime: Date.now(),
      owner: 'user123',
      event: 1,
      status: 1,
      winModel: 1,
      startType: 1
    })
    showResult(data)
    uni.showToast({
      title: '房间编辑成功',
      icon: 'success'
    })
  } catch (error) {
    handleError(error)
  } finally {
    loading.value = false
  }
}

const removeMatchRoom = async () => {
  loading.value = true
  try {
    const data = await MatchRoomAPI.remove({
      matchRoomId: 'room123'
    })
    showResult(data)
    uni.showToast({
      title: '房间删除成功',
      icon: 'success'
    })
  } catch (error) {
    handleError(error)
  } finally {
    loading.value = false
  }
}

const pageMatchRoom = async () => {
  loading.value = true
  try {
    const data = await MatchRoomAPI.page({
      pageNum: 1,
      pageSize: 10
    })
    showResult(data)
  } catch (error) {
    handleError(error)
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
.battle-demo-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 40rpx;
}

.page-header {
  text-align: center;
  margin-bottom: 60rpx;
  
  .page-title {
    display: block;
    font-size: 48rpx;
    font-weight: bold;
    color: #fff;
    margin-bottom: 20rpx;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
  }
  
  .page-subtitle {
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.8);
  }
}

.function-section {
  .section-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20rpx;
    padding: 40rpx;
    margin-bottom: 40rpx;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
    
    .section-title {
      display: block;
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 30rpx;
    }
    
    .button-group {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20rpx;
      
      .demo-btn {
        height: 80rpx;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        border-radius: 12rpx;
        color: #fff;
        font-size: 26rpx;
        font-weight: bold;
        transition: all 0.3s ease;
        
        &:active {
          transform: scale(0.95);
        }
      }
    }
  }
}

.result-section {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 40rpx;
  margin-top: 40rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
  
  .result-title {
    display: block;
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .result-content {
    background: #f8f9fa;
    border-radius: 12rpx;
    padding: 20rpx;
    
    .result-text {
      font-size: 24rpx;
      color: #666;
      font-family: 'Courier New', monospace;
      word-break: break-all;
      white-space: pre-wrap;
    }
  }
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  
  .loading-content {
    background: #fff;
    border-radius: 20rpx;
    padding: 60rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .loading-spinner {
      width: 60rpx;
      height: 60rpx;
      border: 4rpx solid #f3f3f3;
      border-top: 4rpx solid #667eea;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 20rpx;
    }
    
    .loading-text {
      font-size: 28rpx;
      color: #666;
    }
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style> 